<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>renren-aui</title>
  <link rel="stylesheet" href="../aui/plugins/ionicons-4.3.0/css/ionicons.min.css">
  <link rel="stylesheet" href="../aui/css/element-theme/index.css">
  <link rel="stylesheet" href="../aui/css/aui.css">
</head>
<body>
  <div
    v-cloak
    class="aui-wrapper"
    :class="{ 'aui-sidebar--fold': sidebarFold }"
    v-loading.fullscreen.lock="loading"
    element-loading-text="拼命加载中">
    <template v-if="!loading">
      <!-- aui-navbar -->
      <nav class="aui-navbar" :class="'aui-navbar--' + navbarLayoutType">
        <div class="aui-navbar__header">
          <h1 class="aui-navbar__brand">
            <a class="aui-navbar__brand-lg" href="javascript:;">renren-aui</a>
            <a class="aui-navbar__brand-mini" href="javascript:;">aui</a>
          </h1>
        </div>
        <div class="aui-navbar__body">
          <el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
            <el-menu-item index="1" class="aui-navbar__switch" @click="sidebarFold = !sidebarFold">
              <i class="aui-navbar__icon-menu icon ion-ios-menu"></i>
            </el-menu-item>
            <el-menu-item index="2">
              <a href="//www.renren.io/" target="_blank"><i class="aui-navbar__icon-menu icon ion-ios-globe"></i></a>
            </el-menu-item>
            <el-menu-item index="3" @click="refreshHandle()">
              <i class="aui-navbar__icon-menu icon ion-ios-refresh"></i>
            </el-menu-item>
          </el-menu>
          <el-menu class="aui-navbar__menu" mode="horizontal">
            <el-menu-item index="1" class="aui-navbar__search">
              <i class="aui-navbar__icon-menu icon ion-ios-search" @click="searchVisible = !searchVisible"></i>
              <el-autocomplete
                v-model="searchValue"
                :fetch-suggestions="searchSuggestionsHandle"
                placeholder="请输入内容"
                class="aui-navbar__search-txt" :class="{ 'is-show': searchVisible }">
              </el-autocomplete>
            </el-menu-item>
            <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
                <el-submenu index="2-4">
                  <template slot="title">选项4</template>
                  <el-menu-item index="2-4-1">选项1</el-menu-item>
                  <el-menu-item index="2-4-2">选项2</el-menu-item>
                  <el-menu-item index="2-4-3">选项3</el-menu-item>
                </el-submenu>
              </el-submenu>
            <el-menu-item index="4" @click="fullscreenHandle()">
              <i class="aui-navbar__icon-menu icon ion-ios-expand"></i>
            </el-menu-item>
            <el-menu-item index="3" class="aui-navbar__avatar">
              <el-dropdown :show-timeout="0" placement="bottom">
                <span class="el-dropdown-link">
                  <img src="../aui/img/avatar.png">
                  <span>{{ user.name }}</span>
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
                  <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-menu-item>
          </el-menu>
        </div>
        <!-- 弹窗, 修改密码 -->
        <el-dialog
          title="修改密码"
          :visible.sync="updatePasswordVisible"
          :append-to-body="true">
          <el-form :model="updatePasswordDataForm" :rules="updatePasswordDataRule" ref="updatePasswordDataForm" @keyup.enter.native="updatePasswordDataFormSubmit()" label-width="80px">
            <el-form-item label="账号">
              <span>{{ user.name }}</span>
            </el-form-item>
            <el-form-item label="原密码" prop="password">
              <el-input type="password" v-model="updatePasswordDataForm.password" placeholder="原密码"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input type="password" v-model="updatePasswordDataForm.newPassword" placeholder="新密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input type="password" v-model="updatePasswordDataForm.confirmPassword" placeholder="确认密码"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="updatePasswordVisible = false">取消</el-button>
            <el-button type="primary" @click="updatePasswordDataFormSubmit()">确定</el-button>
          </span>
        </el-dialog>
      </nav>

      <!-- aui-sidebar -->
      <aside class="aui-sidebar" :class="'aui-sidebar--' + sidebarLayoutSkin">
        <div class="aui-sidebar__inner">
          <el-menu
            :default-active="sidebarMenuActiveName"
            :collapse="sidebarFold"
            :collapse-transition="false"
            class="aui-sidebar__menu">
            <aui-sidebar-submenu
              v-for="menu in sidebarMenuList"
              :key="menu.id"
              :menu="menu"
              :sidebar-layout-skin="sidebarLayoutSkin">
            </aui-sidebar-submenu>
          </el-menu>
        </div>
      </aside>

      <!-- aui-content -->
      <div class="aui-content__wrapper">
        <main class="aui-content" :class="{ 'aui-content--tabs': isTab }">
          <el-dropdown v-if="isTab" class="aui-content--tabs-tools" :show-timeout="0">
            <i class="icon ion-ios-arrow-down"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="tabsCloseCurrentHandle">关闭当前标签页</el-dropdown-item>
              <el-dropdown-item @click.native="tabsCloseOtherHandle">关闭其它标签页</el-dropdown-item>
              <el-dropdown-item @click.native="tabsCloseAllHandle">关闭全部标签页</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-tabs
            v-if="isTab"
            v-model="contentTabsActiveName"
            @tab-click="tabSelectedHandle"
            @tab-remove="tabRemoveHandle">
            <el-tab-pane
              v-for="item in contentTabs"
              :closable="item.isTabClosable"
              :key="item.name"
              :label="item.title"
              :name="item.name"
              :class="{ 'is-iframe': item.isIframe }">
              <template v-if="item.name === '1001'">
                <i slot="label" class="icon ion-ios-home"></i>
              </template>
              <iframe v-if="item.isIframe" :src="item.url" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
              <el-card v-else shadow="never" class="aui-card--fill">
                <p>这是一个用于测试tab标签页内容, 为card组件自适应高度demo.</p>
                <p>通过<strong>isIframe</strong>属性控制.</p>
              </el-card>
            </el-tab-pane>
          </el-tabs>
          <el-card v-else shadow="never" class="aui-card--fill">
            <p>这是一个用于测试内容, 为card组件自适应高度demo.</p>
            <p>通过<strong>isTab</strong>属性控制.</p>
          </el-card>
        </main>
      </div>
    </template>
  </div>
  <script src="../aui/plugins/vue-2.5.17/vue.js"></script>
  <script src="../aui/plugins/element-2.4.5/index.js"></script>
  <script src="../aui/plugins/axios-0.18.0/axios.min.js"></script>
  <script src="../aui/plugins/lodash-4.17.10/lodash.min.js"></script>
  <script src="../aui/plugins/screenfull-3.3.2/screenfull.min.js"></script>
  <script src="../aui/js/aui.js"></script>
</body>
</html>
